<template>
  <div>
    <div>
      <img src="~/static/guangchang/padding2.png" alt=""
        style="width:3.5rem;height:3.5rem;position:fixed;bottom:4.5rem;right:1.25rem;z-index:9999;" @click="gofabu(0)">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <van-cell v-for="(item,index) in yinyuankang.data" :key="index" style="margin:1.375rem 0;border-radius:.75rem;"
          @click="goindexs(item.id)">
          <div style="background-color: #ffffff;border-radius:.75rem;">
            <div style="display: flex;jusitfy-content: space-between;">
              <img :src="item.face" alt="" style="width:2.5rem;height:2.5rem;border-radius:50%;">
              <div style="margin-left:.75rem;width:82%">
                <div style="display:flex;align-items:center;">
                  <div style="font-size:.75rem;color: #17181A;font-weight: bold;">{{item.pet_name}}</div>
                  <!-- <img src="~/static/guangchang/userbadge.png" alt=""
                    style="width:2.575rem;height: .75rem;margin-left:.25rem;"> -->
                </div>
                <div style="font-size: .6875rem;color: #AEB0B3;line-height:0;margin-top:.375rem;">{{item.time}}</div>
                <div class="truncate" v-html="item.content" @click.stop="handleContentClick($event, item.games,item.subjects)"></div>
  
                <div class="image-gallery">
                  <img @click.stop="showImage(item.img)" v-for="(img, idx) in item.img" :key="idx" :src="img"
                    :alt="'Image ' + (idx + 1)" :style="getImageStyle(item.img.length)"
                    :class="getImageClass(idx, item.img.length)" />
                </div>
              </div>
              <!--  -->
              <!-- <div class="guanzhu">+&nbsp;关注</div> -->
            </div>
            <div
              style="display: flex;align-items: center;justify-content: center;margin: .8925rem;justify-content: space-between;">
              <div style="display:flex;flex-direction: column;align-items: center;jsutify-content: center;">
                <img src="~/static/guangchang/8@3x.png" alt="" style="width: 2.75rem;height:2.75rem;">
                <div style="color: #7B7D80;font-size: .625rem;">{{item.look}}浏览</div>
              </div>
              <div style="display:flex;align-items: center;jsutify-content: center;">
                <div style="display:flex;flex-direction: column;align-items: center;jsutify-content: center;">
                  <img src="~/static/guangchang/6@2x.png" alt="" style="width: 2.75rem;height:2.75rem;">
                  <div style="color: #7B7D80;font-size: .625rem;">{{item.pinglun ==0 ?'' : item.pinglun}}评论</div>
                </div>
                <div
                  style="display:flex;flex-direction: column;align-items: center;jsutify-content: center;margin-left:.875rem;"
                  @click.stop="godianzan(item)">
                  <img v-if="item.is_zan ==0" src="~/static/guangchang/8@2x.png" alt=""
                    style="width: 2.75rem;height:2.75rem">
                  <img v-if="item.is_zan==1" src="~/static/guangchang/heart@2x.png" alt=""
                    style="width: 2.75rem;height:2.75rem">
                  <div style="color: #7B7D80;font-size: .625rem;">{{item.zan ==0 ?'' : item.zan}}点赞</div>
                </div>
              </div>
            </div>
          </div>
        </van-cell>
      </van-list>
    </div>
    <div style="height: 40px;"></div>
  </div>
</template>
  
  <script>
import md5 from 'js-md5';
export default {
  data() {
    return {
      value: '',
      telimages: ['https://img01.yzcdn.cn/vant/apple-1.jpg', 'https://img01.yzcdn.cn/vant/apple-2.jpg', 'https://img01.yzcdn.cn/vant/apple-3.jpg'],
      loading: false,
      finished: false,
      listid: '',
      page: 1,
      yinyuankang: '',
      uid: '',
      id: '',
      textToHash: '',
      t: '',
    }
  },
  mounted() {
    this.uid = this.getCookie('loginnew');
    this.t = Date.now();
    const sign = `${this.uid}${this.t}fsd213ewdsadqwe2121213edsad`;
    this.textToHash = md5(sign);
    this.zhutilist()
  },
  methods: {
    goindexs(e) {
      if( this.uid){
        this.$router.push({
        path: 'pinglunindex',
        query: { id: e }
      });
      }else{
        window.location.href = `${this.$domain}/?ct=wap&ac=login`;
      }
    },
    showImage(e) {
      this.$showImageModal(e,2)
    },
    handleContentClick(event, e,a) {
      const target = event.target;

      if (target.classList.contains('dynamic-span')) {
        const textContent = target.textContent;

        // 查找对应的 gid
        const item = e.find(item => item.name === textContent);
        if (item) {
          const gid = item.gid;
          this.getfils(gid);
        }
      }
       if (target.classList.contains('dynamicsss-span')) {
        const textContent = target.textContent;

        // 查找对应的 gid
        const item = a.find(item => item.name === textContent);
        if (item) {
          const subject_id = item.subject_id;
        }
      }
    },
    getfils(gid) {
      this.$router.push({
        path: `/shouyou/${gid}.html`,
      });
    },
    getCookie(name) {
      const value = `; ${document.cookie}`;
      const parts = value.split(`; ${name}=`);
      if (parts.length === 2) return parts.pop().split(';').shift();
      return '';
    },
    getImageStyle(count) {
      let width, height;
      if (count === 1) {
        width = '230px';
        height = '152px';
      } else if (count === 2) {
        width = '115px';
        height = '83px';
      } else {
        width = '80px';
        height = '80px';
      }
      return { width, height };
    },
getImageClass(index, count) {
  const rowIndex = Math.floor(index / 3);
  const colIndex = index % 3;

  let className = '';
  if (count === 2) {
       if (index === 0) {
      return 'rounded-top-left';
    }
    if (index === 1) {
      return 'rounded-top-right';
    }
  }  else if (count === 9) {
    if (rowIndex === 0) { // 第一行
      if (colIndex === 0) {
        className = 'rounded-top-left';
      } else if (colIndex === 2) {
        className = 'rounded-top-right';
      }
    } else if (rowIndex === 2) {
      if (colIndex === 0) {
        className = 'rounded-bottom-left';
      } else if (colIndex === 2) {
        className = 'rounded-bottom-right';
      }
    }
  } else if (count >= 7) {
    if (rowIndex === 1) { // 第二行
      // 第二行的图片圆角保持不变
      if (colIndex === 0) {
        // className = 'rounded-left';
      } else if (colIndex === 2) {
        // className = 'rounded-right';
      } else {
        className = '';
      }
    } else if (rowIndex === 0) {
      if (colIndex === 0) {
        className = 'rounded-top-left';
      } else if (colIndex === 2) {
        className = 'rounded-top-right';
      }
    } else if (rowIndex === Math.floor((count - 1) / 3)) {
      if (colIndex === 0) {
        className = 'rounded-bottom-left';
      } else if (colIndex === 2) {
        className = 'rounded-bottom-right';
      }
    } else {
      className = colIndex === 0 ? 'rounded-left' : colIndex === 2 ? 'rounded-right' : '';
    }
  } else if (count === 1) {
    className = 'rounded';
  } else {
    if (rowIndex === 0 && colIndex === 0) {
      className = 'rounded-top-left';
    } else if (rowIndex === 0 && colIndex === 2) {
      className = 'rounded-top-right';
    } else if (rowIndex === Math.floor((count - 1) / 3) && colIndex === 0) {
      className = 'rounded-bottom-left';
    } else if (rowIndex === Math.floor((count - 1) / 3) && colIndex === 2) {
      className = 'rounded-bottom-right';
    } else {
      className = colIndex === 0 ? 'rounded-left' : colIndex === 2 ? 'rounded-right' : '';
    }
  }

  return className;
},
    async godianzan(e) {
      const params = {
        ct: 'dongtai',
        ac: 'zan',
        type: 0,
        id: e.id,
        sign: this.textToHash,
        t: this.t,
        uid: this.uid
      };
      const response = await this.$axios.get('api/app/v3', { params });
        e.is_zan = !e.is_zan;
        if(e.is_zan==1){
          e.zan++;
        }else{
          e.zan--;
        }
    },
    onLoad() {
        if (this.page <= this.yinyuankang.max_p) {
          this.page++;
          this.zhutilist();
        }
      this.loading = false;
      if (this.page == this.yinyuankang.max_p) {
        this.finished = true;
      }
    },
    getNewssss(index) {
      this.titleType = index;
    },
    async zhutilist() {
      const params = {
        ct: 'dongtai',
        p: this.page,
        sign: this.textToHash,
        t: this.t,
        uid: this.uid
      };
      const response = await this.$axios.get('api/app/v3', { params });
      response.data.data.forEach(item => {
        item.content = this.formatContent(item.content); // 只处理 content 字段
      });

      if (this.page == 1) {
        this.yinyuankang = response.data;
      } else {
        this.yinyuankang.data = this.yinyuankang.data.concat(response.data.data);
        this.loading = false;
      }

    },
formatContent(content) {
  let tempContent = content.replace(/\[图片\]([^\s]*)/g, (match, p1) => {
    return `{{img:${p1}}}`;
  });
  // tempContent = tempContent.replace(/#([^\n]*)/g, (match, p2) => {
  //   return `<span style="color: #FF5733; class="dynamicsss-span"">#${p2.trim()}</span>`;
  // });

  const finalContent = tempContent.replace(/\{\{img:([^\s]*)\}\}/g, (match, p1) => {
    return `<img src="https://www.77.top/static/gametag.png" alt="icon" class="icon" style="width: 1.25rem;height: 1.25rem;" /> <span class="dynamic-span" style="color: #3D9399FF;font-weight: bold;" >${p1}</span>`;
  });

  return finalContent;
},
    gofabu(e) {
      this.$nuxt.$router.push({ path: '/fabu', query: { e: e } });
    },
  }
}
  </script>
  <style scoped>
.icon {
    width: 16px;
    height: 16px;
    vertical-align: middle;
  }
  
  .highlight {
    color: #3D9399FF;
  }
  
  .image-gallery {
    display: flex;
    flex-wrap: wrap;
    margin-top: .5rem;
    gap: 2px;
    justify-content: left;
  }
  
  .image-gallery img {
    object-fit: cover;
  }
  
 .rounded {
  border-radius: 8px;
}

.rounded-left {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

.rounded-right {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

.rounded-top-left {
  border-top-left-radius: 8px;
}

.rounded-top-right {
  border-top-right-radius: 8px;
}

.rounded-bottom-left {
  border-bottom-left-radius: 8px;
}

.rounded-bottom-right {
  border-bottom-right-radius: 8px;
}
  
  .iframe-container {
    position: relative;
    width: 100%;
    padding-top: 55%;
    border-radius: .9375rem;
    overflow: hidden;
  }
  
  .iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
  }
  
  .xuanzhongdian {
    width: .375rem;
    height: .375rem;
    margin: 0 auto;
    background: #ff7500;
    box-shadow: .0625rem .0625rem .1875rem 0rem rgba(242, 120, 16, 0.32);
    border-radius: 50%;
    /* Simplify border-radius */
    position: absolute;
    left: 46%;
    bottom: -30%;
  }
  
  .active {
    font-weight: bold;
  }
  
  .guanzhu {
    width: 4.125rem;
    height: 1.625rem;
    border-radius: 4.25rem;
    border: 1px solid #2E3033;
    text-align: center;
    line-height: 1.625rem;
    font-weight: bold;
    margin-left: 4rem;
  }
  
  .truncate {
    color: #47494DFF;
    font-size: .9375rem;
    width: 100%;
    text-align: left;
    display: flex;
    margin-top: .625rem;
    flex-wrap: wrap;
    align-items: center;
  }
  
  .iframe-container {
    position: relative;
    width: 100%;
    padding-top: 55%;
    border-radius: .9375rem;
    overflow: hidden;
  }
  
  .iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
  }
</style>